<template>
  <div class="control_detail">
    <div class="control_detail_box">
      <div
        class="control_detail_item"
        v-for="(item, index) in operationalControlList"
        :key="index"
      >
        <!-- <el-date-picker
          v-model="item.deteValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2"
          style="margin-right: 4px; width: 250px"
        >
        </el-date-picker> -->
        <el-select
          v-model="item.ifDid"
          clearable
          :disabled="operationType == 'check'"
          style="width: 120px; margin-right: 4px"
        >
          <el-option
            v-for="dict in dateSelect2"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-model="item.triggerMode"
          clearable
          prefix-icon="el-icon-search"
          style="width: 160px; margin-right: 4px"
          :disabled="operationType == 'check'"
        >
          <el-option
            v-for="dict in dateSelect3"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <i
          class="el-icon-close"
          v-show="operationType != 'check'"
          @click="delControlItem(item)"
        ></i>
      </div>
      <div class="operation">
        <el-button
          v-show="operationType != 'check'"
          type="text"
          icon="el-icon-circle-plus"
          @click="addControlItem"
          >添加</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
const dynamicShortcuts = [
  "今日",
  "昨日",
  "本周",
  "上周",
  "本月",
  "上月",
  "过去7天",
  "过去30天",
  "过去90天",
  "上线至今",
];
let dynamicShortcutstext = null;
import { getUuid } from "../../../utils/flowRule";
import mixin from "./mixin";
export default {
  name: "",
  mixins: [mixin],
  inject: ["getFlatRoot"],
  props: ["initialOperationalControlList", "approverConfig"],
  computed: {
    residueNum() {
      let num = 100;
      this.branchList.forEach((item, index) => {
        if (item.num) {
          num = num - Number(item.num);
        }
      });
      return num;
    },
  },

  data() {
    return {
      operationType: "",
      activeName: "shunt",
      showShunt: true,
      branchList: [],
      dateSelect2: [
        { value: "1", label: "完成" },
        { value: "2", label: "未完成" },
      ],
      dateSelect3: [
        { value: "1", label: "App推送点击" },
        { value: "2", label: "App激活" },
        { value: "3", label: "App崩溃" },
        { value: "4", label: "APP浏览页面" },
        { value: "5", label: "App点击" },
        { value: "6", label: "App页面浏览" },
        { value: "7", label: "Banner点击" },
      ],
      operationalControlList: [],
      pickerOptions2: {
        shortcuts: dynamicShortcuts.map((text) => {
          return {
            text,
            onClick(picker) {
              const date = new Date();
              const end = new Date();
              const start = new Date();
              if (text === "今日") {
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "昨日") {
                dynamicShortcutstext = this.text;
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit("pick", [start, end]);
              } else if (text === "本周") {
                console.log(start.getDay(), start.getDate(), "start");
                var thisDay = start.getDay() - 1;
                var thisDate = start.getDate();
                if (thisDay != 0) {
                  start.setDate(thisDate - thisDay);
                }
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "上周") {
                const oDate = new Date();
                oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7);
                var day = oDate.getDay() - 1;
                if (day == 0) {
                  start.setDate(oDate.getDate());
                  end.setDate(oDate.getDate() + 6);
                } else {
                  start.setTime(oDate.getTime() - 3600 * 1000 * 24 * day);
                  end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (6 - day));
                }
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "本月") {
                start.setDate(1);
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "上月") {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();

                if (month == 0) {
                  year--;
                  start = new Date(year, 11, 1);
                  end = new Date(year, 11, 31);
                } else {
                  start = new Date(year, month - 1, 1);
                  end = new Date(year, month, 0);
                }
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "过去7天") {
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "过去30天") {
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "过去90天") {
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              } else if (text === "上线至今") {
                // 没做
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                dynamicShortcutstext = this.text;
                picker.$emit("pick", [start, end]);
              }
            },
          };
        }),
      },
    };
  },
  mounted() {
    this.operationType = this.$route.query.type;
    if (
      this.initialOperationalControlList &&
      this.initialOperationalControlList.length
    ) {
      this.operationalControlList = this.initialOperationalControlList;
    } else {
      this.operationalControlList = [
        {
          id: getUuid(),
          deteValue: "",
          ifDid: "",
          triggerMode: "",
        },
      ];
    }
    this.getPointList();
  },
  methods: {
    getPointList() {
      let allNodeList = this.getFlatRoot();
      let fatherNode = allNodeList[this.approverConfig.fatherID];
      let fatherUpNode = allNodeList[fatherNode.fatherID];
      if (
        fatherUpNode &&
        fatherUpNode.nodeDetail &&
        fatherUpNode.nodeDetail.contentType
      ) {
        switch (fatherUpNode.nodeDetail.contentType) {
          case "poster":
            this.dateSelect3 = this.posterPointList;
            break;
          case "article":
            this.dateSelect3 = this.articlePointList;
            break;
          case "offlineActivity":
            this.dateSelect3 = this.offlineActivityPointList;
            break;
          case "onlineActivity":
            this.dateSelect3 = this.onlineActivityPointList;
            break;
          default:
            this.dateSelect3 = [];
        }
      }
    },
    confirm() {
      let data = {};
      data.operationalControlList = this.operationalControlList;
      return data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    generateUniqueId() {
      return "id_" + Math.random().toString(36).substr(2, 9);
    },
    handleChange(val, item) {
      this.branchList.forEach((ele) => {
        if (ele.id == item.id) {
          ele.num = val;
        }
      });
    },
    addItem() {
      this.branchList.push({
        id: getUuid(),
        num: "",
      });
    },
    delItem(item) {
      let currentItemIndex = this.branchList.findIndex((ele) => {
        return ele.id == item.id;
      });

      if (
        currentItemIndex == 0 ||
        (currentItemIndex && currentItemIndex != -1)
      ) {
        this.branchList.splice(currentItemIndex, 1);
      }
    },
    addControlItem() {
      this.operationalControlList.push({
        id: getUuid(),
        deteValue: "",
        ifDid: "",
        triggerMode: "",
      });
    },
    delControlItem(item) {
      let currentItemIndex = this.operationalControlList.findIndex((ele) => {
        return ele.id == item.id;
      });

      if (
        currentItemIndex == 0 ||
        (currentItemIndex && currentItemIndex != -1)
      ) {
        this.operationalControlList.splice(currentItemIndex, 1);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.branch_list_item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  .input_item {
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    span {
      margin-right: 5px;
    }
    .el-icon-close {
      margin-left: 10px;
    }
  }
}
.shunt_operation {
  width: 70%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
  span {
    display: inline-flex;
    align-items: center;
    .el-icon-circle-plus {
      margin-right: 5px;
    }
  }
}
.control_detail {
  .control_detail_box {
    background: #eee;
    padding: 10px;
  }
  .control_detail_item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
  }
}
.operation {
  margin-top: 10px;
}
</style>
